﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>相簿</title>
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"></link>
	<link href="../css/reset.css" rel="stylesheet" type="text/css"></link>
	<link href="../css/common.css" rel="stylesheet" type="text/css"></link>
	<link href="../css/pxmain.css" rel="stylesheet" type="text/css"></link>
	<script type="text/javascript" src="../js/jquery/jquery.js"></script>
    <script type="text/javascript" src="../js/modernizr1.js"></script>
	<!--[if IE 6]>
	<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js" ></script>
	<script type="text/javascript">
	DD_belatedPNG.fix('.user-setting,.zan-ico, .ico-hit, .ico-laud, .icon-downlowd, .icon-share,.show-wall .show-pager span ,.model-logo-one');
	</script>
	<![endif]-->
</head>
<body>
	<header class="site-nav fsm">
		<section class="site-menu lfloat">
			<i class="site-logo"></i>
			<ul class="lfloat">
				<li><a href="user-bf.html">天香国色</a></li>
				<li><a href="fashion-hub.html">时尚文化产业园</a></li>
				<li><a href="index.htm">模特行业协会</a></li>
                <li><a href="#">模特</a></li>
                <li><a href="#">主题活动</a></li>
			</ul>
		</section>
		<section class="site-tools rfloat pr mrs">
			<ul class=" site-menu rfloat">
				<li><a href="#">消息(2)</a></li>
				<li><a href="#">好友(3/123)</a></li>
				<li><a href="#">关注(6/223)</a></li>
				<li class="login-info">上午好,小美先生</li>
				<li class="user-setting"></li>
			</ul>
			<ul class="user-menu pa">
				<li class="user-home"><i></i><a href="#">个人主页</a></li>
				<li class="user-favorite"><i></i><a href="#">秘密收藏</a></li>
				<li class="user-data"><i></i><a href="#">档案资料</a></li>
				<li class="user-deal"><i></i><a href="#">我的交易</a></li>
				<li class="user-shop"><i></i><a href="#">我的店铺</a></li>
				<li class="setting"><i></i><a href="#">风格设置</a></li>
				<li class="exit"><i></i><a href="#">退&nbsp;&nbsp;出</a></li>
			</ul>
		</section>
	</header>
	<!----------------top 结束------------------->
    <section class="vip-headerbg">
        <div class="vip-header clearfix">
            <div class="vip-logo lfloat pr">
                <a href="#" class="vip-ico">
                    <img src="../images/demo/userPic1.jpg" alt="" />
                </a>
                <i class="icomore vipmore" style="bottom: 0;left: 50px;"></i>
                <div class="logo-more">
                
                </div>
            </div>
            <nav class="vip-nav lfloat">
            	<ul class="clearfix">
                	<li>
                    	<a href="#" class="b1">首页</a>
                    </li>
                    <li class="c1">
                    	<a href="#" class="b2">相簿</a>
                    </li>
                    <li>
                    	<a href="#" class="b3">中心</a>
                    </li>
                    <li>
                    	<a href="#" class="b4">圈子</a>
                    </li>
                </ul>
            </nav>
        </div>
    </section>
	<section id="page1" class="vipPic userShow">
    	<h1 class="showPicTitle pr">
                    	<a href="#" class="bShow">名品展示</a>
                        <span class="AlbumName">造型作品</span>
                        <div class="more-box inlineBlock">
                            <i class="vipmore"></i>
                            <div class="newSort pa">
                                <div class="GreyBox pr">
                                                    <div class="GreyBox-menu mvm">
                                                        <ul class="GBmenu-data">
                                                            <li class="GBmenu-editAlbum"><i></i>编辑专辑</li>
                                                            <li class="GBmenu-delAlbum"><i></i>删除专辑</li>
                                                        </ul>
                                                    </div>
                                </div>
                            </div>
                        </div>
        </h1>
    	<div id="container" class="ptl">
				<div class="navigation-container pr">
					<div class="pre-album pa">
						<a href="#">
							<img src="../images/demo/pre1.jpg" alt="" />
							<em>上一个图集</em>
						</a>
					</div>
					<div id="thumbs" class="navigation pr">
						<a class="pageLink prev" href="#" title="上一页"></a>
						<ul class="thumbs">
							<li>
								<a class="thumb" href="../images/demo/bigpic5.jpg" title="">
									<img src="../images/demo/pic5.jpg" alt="" />
								</a>
								<!--
								<div class="caption">
									<div class="image-title"></div>
									<div class="image-desc"></div>
									<div class="download"></div>
								</div>
								-->
							</li>
	
							<li>
								<a class="thumb" href="../images/demo/bigpic2.jpg" title="">
									<img src="../images/demo/pic2.jpg" alt="" />
								</a>
								<!--
								<div class="caption">
									<div class="image-title"></div>
									<div class="image-desc"></div>
									<div class="download"></div>
								</div>
								-->
							</li>
	
							<li>
								<a class="thumb" href="../images/demo/bigpic3.jpg" title="">
									<img src="../images/demo/pic3.jpg" alt="" />
								</a>
								<!--
								<div class="caption">
									<div class="image-title"></div>
									<div class="image-desc"></div>
									<div class="download"></div>
								</div>
								-->
							</li>
	
							<li>
								<a class="thumb" href="../images/demo/bigpic4.jpg" title="">
									<img src="../images/demo/pic4.jpg" alt="" />
								</a>
								<!--
								<div class="caption">
									<div class="image-title"></div>
									<div class="image-desc"></div>
									<div class="download"></div>
								</div>
								-->
							</li>
	
							<li>
								<a class="thumb" href="../images/demo/bigpic5.jpg" title="">
									<img src="../images/demo/pic1.jpg" alt="" />
								</a>
								<!--
								<div class="caption">
									<div class="image-title"></div>
									<div class="image-desc"></div>
									<div class="download"></div>
								</div>
								-->
							</li>
	
							<li>
								<a class="thumb" href="../images/demo/bigpic6.jpg" title="">
									<img src="../images/demo/pic6.jpg" alt="" />
								</a>
								<!--
								<div class="caption">
									<div class="image-title"></div>
									<div class="image-desc"></div>
									<div class="download"></div>
								</div>
								-->
							</li>
	
							<li>
								<a class="thumb" href="../images/demo/bigpic6.jpg" title="">
									<img src="../images/demo/pic6.jpg" alt="" />
								</a>
								<!--
								<div class="caption">
									<div class="image-title"></div>
									<div class="image-desc"></div>
									<div class="download"></div>
								</div>
								-->
							</li>
						</ul>
						<a class="pageLink next" href="#" title="下一页"></a>
                        <span class="move1"><i></i></span>
					</div>
					
					<div class="next-album pa">
						<a href="#">
							<img src="../images/demo/next1.jpg" alt="" />
							<em>下一个图集</em>
						</a>
					</div>
				</div>
				<div class="show-content">
					<div id="caption" class="caption-container">
						<div class="photo-index mtm ac"><h1 class="inline">活在梦中</h1><span></span></div>
					</div>
					<div class="slideshow-container pr">
						<div id="controls" class="controls"></div>
						<div id="loading" class="loader"></div>
						<div id="slideshow" class="slideshow"></div>
					</div>
				</div>
				
				<div style="clear: both;"></div>
			</div>
			
			<div class="recommend1 mvm mlxxl">
				<a href="#" class="comment1"><i></i>评论<span class="tcolor">(48)</span></a> | 
				<a href="#" class="praise1"><i></i>赞<span class="tcolor">(48)</span></a> | 
				<a href="#" class="favorite1"><i></i>收藏</a> | 
			</div>
			<!-- End相册-->
		</div>
		<!--end中部相册-->
		
		<!--st评论-->
		<div class="section clearfix mtl">
			<div class="commentbody lfloat" style="width:100%;">
				<!--<h2><i></i><span></span>我来评论</h2>-->
				<div class="commentTxt clearfix phxl pvs">
					<form action="" method="post">
						<textarea></textarea>
						<div class="comment-ico lfloat"></div>
						<div class="comment-submit rfloat mts">
							<label><input type="checkbox" /> 转发给我的粉丝</label>
							<button type="button">评论</button>
						</div>
					</form>
				</div>
				<div class="commentList mhxl">
					<ul class="commentData mvm">
						<li class="comment-detail clearfix">
							<div class="commentPic">
								<a href="#"><img src="../images/demo/userPic.jpg" alt="" /></a>
							</div>
							<div class="commentText">
								<div class="userName">
									<strong>
										<a title="" href="#" class="fcolor">李颖芝</a><a class="vip" target="_blank" title="认证" href="#"><i class="zan-ico"></i></a>
									</strong>:&nbsp;
								</div>
								<div class="msgCnt">
									对待感情不作伪真的很难呢，也未必是正确的行为，因为人性，以及人的行为很复杂。
								</div>
								<div class="commentTime">
									( 10秒前 )
								</div>
							</div>
						</li>
						<li class="comment-detail clearfix">
							<div class="commentPic">
								<a href="#"><img src="../images/demo/userPic5.jpg" alt="" /></a>
							</div>
							<div class="commentText">
								<div class="userName">
									<strong>
										<a title="" href="#" class="fcolor">天山童姥</a><a class="vip" target="_blank" title="认证" href="#"><i class="zan-ico"></i></a>
									</strong>:&nbsp;
								</div>
								<div class="msgCnt">
									对待感情不作伪真的很难呢。
								</div>
								<div class="commentTime">
									( 10秒前 )
								</div>
							</div>
						</li>
						<li class="comment-detail clearfix">
							<div class="commentPic">
								<a href="#" ><img src="../images/demo/userPic2.jpg" alt="" /></a>
							</div>
							<div class="commentText">
								<div class="userName">
									<strong>
										<a title="" href="#" class="fcolor">小不点</a><a class="vip" target="_blank" title="认证" href="#"><i class="zan-ico"></i></a>
									</strong>:&nbsp;
								</div>
								<div class="msgCnt">
									对待感情不作伪真的很难呢，也未必是正确的行为。
								</div>
								<div class="commentTime">
									( 10秒前 )
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="blog-more rfloat mal"><a href="#">&gt;&gt;更多</a></div>
			</div>
           
		</div>
        
		<!--end评论-->
    </section>
	<footer id="footer" class="clearfix fcolor1">
			<ul class="footnav">
				<li><a href="#">关于品秀网</a> 　|&nbsp;&nbsp;&nbsp;</li>
				<li><a href="#">联系我们</a> 　|&nbsp;&nbsp;&nbsp;</li>
				<li><a href="#">商业合作</a>　 |&nbsp;&nbsp;&nbsp;</li>
				<li><a href="#">在线咨询</a></li>
			</ul>
			<div class="copyright rfloat ar">
				<p>品秀网@2011　增值电信业务经营许可证：粤B2-20110109</p>
			</div>
	</footer>
<script type="text/javascript" src="../js/jquery/galleriffic/jquery.galleriffic.js"></script>
<script type="text/javascript" src="../js/jquery/galleriffic/jquery.history.js"></script>
<script type="text/javascript" src="../js/jquery/galleriffic/jquery.opacityrollover.js"></script>
<script type="text/javascript">
			jQuery(document).ready(function($) {
				$('div.content').css('display', 'block');
				var onMouseOutOpacity = 0.67;
				$('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({
					mouseOutOpacity:   onMouseOutOpacity,
					mouseOverOpacity:  1.0,
					fadeSpeed:         'fast',
					exemptionSelector: '.selected1'
				});
				
				var gallery = $('#thumbs').galleriffic({
					delay:                     2500,
					numThumbs:                 6,//缩略图显示数
					preloadAhead:              6,//预加载图片数
					enableTopPager:            false,//是否启用上翻页
					enableBottomPager:         false,//是否启用下翻页
					imageContainerSel:         '#slideshow',//大图显示容器
					controlsContainerSel:      '#controls',//播放、上一图、下一图
					captionContainerSel:       '#caption',//图片文字说明区
					loadingContainerSel:       '#loading',//正在载入gif图像
					renderSSControls:          false,//播放、暂停
					renderNavControls:         false,//上一图、下一图
					playLinkText:              '自动播放',//播放显示文字
					pauseLinkText:             '暂停播放',//暂停显示文字
					prevLinkText:              '&lsaquo; 上一张',//上一图显示文字
					nextLinkText:              '下一张 &rsaquo;',//下一图显示文字
					nextPageLinkText:          '下一页 &rsaquo;',//下一页显示文字
					prevPageLinkText:          '&lsaquo; 上一页',//上一页显示文字
					enableHistory:             true,//是否启用后退
					autoStart:                 false,//是否启用自动播放
					syncTransitions:           true,//是否启用同步显示
					defaultTransitionDuration: 900,//
					onSlideChange:             function(prevIndex, nextIndex) {
						this.find('ul.thumbs').children()
							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
							.eq(nextIndex).fadeTo('fast', 1.0);
						
						this.$captionContainer.find('div.photo-index span')
							.html('(<span class="forthis"> '+ (nextIndex+1) +'</span> / '+ this.data.length + ' )');
					},
					onPageTransitionOut:       function(callback) {
						this.fadeTo('fast', 0.0, callback);
					},
					onPageTransitionIn:        function() {
						var prevPageLink = this.find('a.prev').css('visibility', '');
						var nextPageLink = this.find('a.next').css('visibility', '');
						if (this.displayedPage > 0)
							prevPageLink.css('visibility', 'visible');
						var lastPage = this.getNumPages() - 1;
						if (this.displayedPage < lastPage)
							nextPageLink.css('visibility', 'visible');
						this.fadeTo('fast', 1.0);
					}
				});

				/**************************************/

				gallery.find('a.prev').click(function(e) {
					gallery.previousPage();
					e.preventDefault();
				});

				gallery.find('a.next').click(function(e) {
					gallery.nextPage();
					e.preventDefault();
				});

				/*************************************/
				function pageload(hash) {
					// alert("pageload: " + hash);
					// hash doesn't contain the first # character.
					if(hash) {
						$.galleriffic.gotoImage(hash);
					} else {
						gallery.gotoIndex(0);
					}
				}
				$.historyInit(pageload, "advanced.html");
				$("a[rel='history']").live('click', function(e) {
					if (e.button != 0) return true;
					var hash = this.href;
					hash = hash.replace(/^.*#/, '');
					$.historyLoad(hash);
					return false;
				});

				/***********************************/
			});
</script>
</body>  
</html>